/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/ban-types */
import { useEffect, useState } from "react";
import Header from "@/components/Header";
import {
  Input,
  Select,
  Table,
  Button,
  TableColumnsType,
  Form,
  Modal,
  Row,
  Col,
  Space,
  Spin,
} from "antd";
import "../css/store.scss";
import _ from "lodash";
import { DataType } from "./interfaceType";
import { getStore, dispatchStore,getVehicle,getUserInfo } from "../../../api/index";
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};
export default function MessageDispatch() {
  const columns: TableColumnsType<DataType> = [
    {
      title: "编号",
      width: 90,
      dataIndex: "veid",
      key: "key",
      defaultSortOrder: "ascend", //默认升序
      sorter: (a, b) => a.veid - b.veid,
    },
    {
      title: "车型/照片",
      width: 250,
      dataIndex: "image",
      key: "id",
      render: (imageUrl, record) => {
        const description = record.vname;
        const imageUrlwithslash = imageUrl.replace(/\/upload/, "/upload/");
        return (
          <div style={{ display: "flex", alignItems: "center" }}>
            <img
              src={imageUrlwithslash}
              alt="车型照片"
              style={{
                maxWidth: "90px",
                maxHeight: "100px",
                borderRadius: "5px",
                marginLeft: "10px",
                marginRight: "10px",
              }}
            />
            <p className="text">{description}</p>
          </div>
        );
      },
    },
    {
      title: "车牌",
      width: 150,
      dataIndex: "platenumber",
      key: "platenumber",
    },
    {
      title: "所在门店",
      dataIndex: "name",
      key: "name",
      width: 150,
    },
    {
      title: "地址",
      dataIndex: "address",
      key: "address",
      width: 150,
    },
    {
      title: "门店联系电话",
      dataIndex: "tell",
      key: "tell",
      width: 150,
    },
    {
      title: "操作",
      key: "operation",
      fixed: "right",
      width: 110,
      render: (_, record) => {
        return (
          <div>
            <Button
              type="primary"
              style={{ marginBottom: "5px" }}
              onClick={() => hideDiao(record.veid)}
            >
              调度
            </Button>
          </div>
        );
      },
    },
  ];
  const [list, setList] = useState([]); // 存放车辆信息
  const [store, setStore] = useState<[]>([]); // 存放门店信息
  const [name, setName] = useState<string>(""); // 搜索(车型名)
  const [vstatus, setVstatus] = useState<string>(""); // 搜索(状态)
  const [sid, setSid] = useState<string>(""); // 搜索(门店)
  const [spinning, setSpinning] = useState(false); // 刷新页面缓冲一秒
  const [open, setOpen] = useState(false); // 弹出层状态
  const [user, setUser] = useState<[]>([]); // 存放用户信息
  const [id, setId] = useState(); // 当前数据id
  // 获取门店信息
  const get = async () => {
    const data = await getStore();
    setStore(data.data.data);
  };
  // 关闭弹出层
  const hideModal = () => {
    setOpen(false);
  };
  // 开启弹出层
  const hideDiao = (id: any) => {
    setId(id);
    setOpen(true);
  };
  // 调度门店
  const onFinish = async (values: any) => {
    await dispatchStore(values, id);
    setOpen(false);
  };
  // 取消弹出层
  const cancel = () => {
    setOpen(false);
  };
  // 搜索(车型名)
  const onChange = _.debounce((value: any) => {
    setName(value.target.value);
  }, 500);
  // 搜索(状态)
  const onSelectChange = (value: string) => {
    setVstatus(value);
  };
  // 搜索(门店)
  const onSelectChange1 = (value: string) => {
    setSid(value);
  };
  // 初始值
  const sousuo = async () => {
    const { data } = await getVehicle(name,vstatus,sid)
    const updatedList = data.data.map((item: { veid: any }) => ({
      ...item,
      key: item.veid,
    }));
    setList(updatedList);
  };
  // 获取用户信息
  const getUser = async () => {
    const { data } = await getUserInfo();
    console.log(data,'13456');
    
    setUser(data.data);
  };
  useEffect(() => {
    sousuo();
  }, [name, vstatus, sid]);
  useEffect(() => {
    get();
    getUser();
    setSpinning(true);
    setTimeout(() => {
      setSpinning(false);
    }, 1000);
  }, []);
  return (
    <div className="storeBigBox">
      <Spin spinning={spinning} tip="Loading...">
        <Header title="车辆调度" />
        <Form
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          layout="inline"
          style={{ marginTop: "5px", marginLeft: "10px" }}
        >
          <Form.Item name="name" label="搜索车型" style={{ width: "300px" }}>
            <Input
              placeholder="请输入内容"
              onChange={(value) => onChange(value)}
            />
          </Form.Item>
          <Form.Item name="vstatus" label="运营状态" style={{ width: "300px" }}>
            <Select
              placeholder="请选择状态"
              onChange={(value) => onSelectChange(value)}
            >
              <Select.Option key="true" value="1">
                租凭中
              </Select.Option>
              <Select.Option key="false" value="0">
                未租凭
              </Select.Option>
            </Select>
          </Form.Item>
          <Form.Item name="sid" label="所属门店" style={{ width: "300px" }}>
            <Select
              placeholder="请选择门店"
              onChange={(value) => onSelectChange1(value)}
            >
              {store.map((item: any) => (
                <Select.Option key={item.id} value={item.id}>
                  {item.name}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
        </Form>
        <div className="storeContent">
          <div className="num1">总计:{list.length}</div>
          <Table columns={columns} dataSource={list} pagination={{
              defaultPageSize: 3, //默认煤业显示条数
              defaultCurrent: 1, //默认当前页数第一页
              pageSizeOptions: ["3", "5", "10"], //每页显示多少条
              locale: {
                items_per_page: "条/页",
              },
            }} />
        </div>
        <Modal
          title="调度车辆"
          visible={open}
          onCancel={hideModal}
          footer={
            [] // 设置footer为空，去掉 取消 确定默认按钮
          }
          width="800px"
          bodyStyle={{
            maxHeight: "70vh",
            overflowY: "auto",
            overflowX: "hidden",
          }}
          style={{ top: "200px" }}
        >
          <Form
            name="validate_other"
            {...formItemLayout}
            onFinish={onFinish}
            style={{ minWidth: 600 }}
            layout="horizontal"
          >
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  name="uid"
                  label="指派人员"
                  rules={[{ required: true }]}
                  style={{ marginTop: "50px" }}
                >
                  <Select placeholder="请选择指派人员">
                    {user.map((item: any) => (
                      <Select.Option key={item.id} value={item.id}>
                        {item.name}
                      </Select.Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>

              <Col span={12}>
                <Form.Item
                  name="sid"
                  label="选择门店"
                  rules={[{ required: true }]}
                  style={{ marginTop: "50px" }}
                >
                  <Select placeholder="请选择门店">
                    {store.map((item: any) => (
                      <Select.Option key={item.id} value={item.id}>
                        {item.name}
                      </Select.Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Form.Item
              wrapperCol={{ span: 18, offset: 6 }}
              style={{ marginLeft: "120px", marginTop: "40px" }}
            >
              <Space>
                <Button htmlType="submit" onClick={() => cancel()}>
                  取消
                </Button>
                <Button type="primary" htmlType="submit">
                  提交
                </Button>
              </Space>
            </Form.Item>
          </Form>
        </Modal>
      </Spin>
    </div>
  );
}
